<template>
	<view class="content">
		<view class="box top">
			<!-- 标题及封面 -->
			<view class="topSon">
				<view class="img">
					<u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image>
				</view>
				<view class="title">
					{{title}}
				</view>
			</view>
			<!-- 人数 -->
			<view class="info">
				可参与人数: {{info.totalNumber}}	已报名: {{info.signUp}}	已签到: {{info.signed}}
			</view>
			<!-- 时间 -->
			<view class="times">
				<view class="time">报名时间:{{timeSigningUp}}</view>
				<view class="time">打扫时间:{{timeCleanUp}}</view>
			</view>
			<!-- 地点 -->
			<view class="address">打扫地址:{{address}}</view>
		</view>
		<!-- 发起人信息 -->
		<view class="box middle">
			<view class="middleSon">发起人:{{founder}}</view>
			<view class="middleSon">联系方式:{{phoneNumber}}</view>
		</view>
		<!-- 打扫成员 -->
		<view class="box footer">
			<view class="members">打扫成员</view>
			<view class="membersInfo">
				<!-- 所有打扫人员 -->
				<view class="membersInfoSon" v-for="(item, index) in membersInfo" :key="index">
					<!-- 签到状态 -->
					<view class="status" :class="item.status === '未签到' ? 'a' : 'b'">{{item.status}}</view>
					<!-- 个人头像 -->
					<view class="img">
						<u-avatar :src="item.img"></u-avatar>
					</view>
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 签到按钮 -->
		<view class="fixed">
			<u-button :color="color" :text="text" type="info" @click="SignIn" :disabled="bool"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '/static/releaseTask.png',
				color: '#ff895e',	// 按钮颜色
				bool: false,		// 是否禁用按钮
				text: '签到',		// 按钮文字
				title: '活动标题',	// 活动标题
				info: {				// 分别为：可参与人数，报名人数，已签到人数
					 totalNumber: 12,
					 signUp: 6,
					 signed: 3
				},
				timeSigningUp: '11.27 08:12—11.28 23.59',	// 报名时间
				timeCleanUp: '11.27 08:12—11.28 23.59',		// 打扫时间
				address: '电子与信息工程学院',				  // 打扫地址
				founder: '花木人',							 // 活动创始人
				phoneNumber: '12345678900',					// 电话号码
				membersInfo: [{
					name: '花兰',
					img: '/static/releaseTask.png',
					status: '已签到'
				},{
					name: '穆桂英',
					img: '/static/releaseTask.png',
					status: '未签到'
				},{
					name: '哆啦A梦',
					img: '/static/releaseTask.png',
					status: '未签到'
				},{
					name: '迪迪热巴',
					img: '/static/releaseTask.png',
					status: '未签到'
				},{
					name: '穆英',
					img: '/static/releaseTask.png',
					status: '已签到'
				},{
					name: '哆啦A梦',
					img: '/static/releaseTask.png',
					status: '已签到'
				},{
					name: '迪迪热巴',
					img: '/static/releaseTask.png',
					status: '未签到'
				},{
					name: '穆桂英',
					img: '/static/releaseTask.png',
					status: '未签到'
				},{
					name: '哆啦A梦',
					img: '/static/releaseTask.png',
					status: '未签到'
				},{
					name: '迪迪热巴',
					img: '/static/releaseTask.png',
					status: '未签到'
				}]
			}
		},
		methods: {
			// 签到功能
			SignIn() {
				this.color = '';
				this.bool = true;
				this.text = '已签到';
			}
		}
	}
</script>

<style lang="scss">
	.content {
		margin: 0;
		padding: 0;
		padding-top: 20rpx;
		.box {
			box-sizing: border-box;
			width: 90%;
			border-radius: 20rpx;
			margin: 0 5% 20rpx 5%;
			box-shadow: 0px 0px 6px #c6c6c6;
			font-family: 'KaiTi', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
		}
		.top {
			height: 500rpx;
			font-size: 30rpx;
			// 标题及封面
			.topSon {
				display: flex;
				font-family: 'SimHei', Courier, monospace;
				font-size: 40rpx;
				font-weight: 600;
				.img {
					padding: 20rpx;
					margin: auto;
				}
				.title {
					width: calc(100% - 100px);
					height: 200rpx;
					line-height: 200rpx;
					padding-left: 40rpx;
				}
			}
			// 人数
			.info {
				font-size: 22rpx;
				color: #666;
				padding: 0 0 16rpx 20rpx;
				border-bottom: 4rpx solid #bbb;
			}
			// 时间
			.times {
				box-sizing: border-box;
				height: 140rpx;
				line-height: 60rpx;
				width: 100%;
				padding: 10rpx 0 0 40rpx;
				border-bottom: 4rpx solid #bbb;
			}
			// 地点
			.address {
				box-sizing: border-box;
				height: 100rpx;
				line-height: 100rpx;
				width: 100%;
				padding-left: 40rpx;
			}
		}
		// 发起人信息
		.middle {
			height: 160rpx;
			line-height: 60rpx;
			padding: 20rpx 0 0 40rpx;
		}
		// 打扫成员
		.footer {
			// height: 400rpx;
			padding: 30rpx;
			.members {
				height: 40rpx;
				width: 100%;
			}
			.membersInfo {
				display: flex;
				flex-wrap: wrap;
				.membersInfoSon {
					position: relative;
					display: flex;
					flex-direction: column;
					padding: 20rpx;
					text-align: center;
					.status {
						position: absolute;
						top: 24rpx;
						right: -20rpx;
						z-index: 99;
						height: 30rpx;
						width: 78rpx;
						font-size: 12rpx;
						border-radius: 20rpx;
						text-align: center;
					}
					.a {
						background-color: #9f9f9f;
					}
					.b {
						background-color: #5acf56;
					}
					.img {
						margin: auto;
						padding-bottom: 10rpx;
					}
				}
			}
		}
		// 签到按钮
		.fixed {
			position: fixed;
			bottom: 0;
			right: 0;
			z-index: 100;
			width: 100%;
			border-radius: 20rpx;
			box-shadow: 0px 0px 14px #8cb7ffc7;
		}
	}
</style>
